<script setup lang="ts">
import type { Props } from './utils/types'
import { timeAgo, formatTimestamp } from '@/utils/index'
import ItemVideo from '@/components/ItemVideo/index.vue'

const $props = defineProps<Props>()

function handleJumpFrontDesk() {
    const goods_type = $props.trend?.goods_type
    if (goods_type == 'video') {
        window.location.href = `${import.meta.env.VITE_APP_WEB_URL}/video-details/${$props.trend?.goods?.id}?categoryType=Video`
    } else if (goods_type == 'font') {
        window.location.href = `${import.meta.env.VITE_APP_WEB_URL}/font-details/${$props.trend?.goods?.id}?categoryType=Font`
    } else if (goods_type == 'picture') {
        window.location.href = `${import.meta.env.VITE_APP_WEB_URL}/picture-details/${$props.trend?.goods?.id}?categoryType=Picture`
    } else if (goods_type == 'music') {
        window.location.href = `${import.meta.env.VITE_APP_WEB_URL}/music-details/${$props.trend?.goods?.id}?categoryType=Music`
    }
}

</script>

<template>
    <div class="item-user" @click="handleJumpFrontDesk">
        <div class="time" v-if="trend.time">{{ timeAgo(formatTimestamp(trend.time)) }}</div>
        <div class="view">
            <div class="video" v-if="trend.goods_type == 'video'">
                <ItemVideo style="height: 100%;"
                    :video="{ file: trend?.goods?.show, main_image: trend?.goods?.image }" />
            </div>
            <div class="picture" v-else-if="trend.goods_type == 'picture'">
                <img v-if="trend?.goods?.image" :src="trend?.goods?.image" alt="goods">
            </div>
            <div class="font" v-else-if="trend.goods_type == 'font'">
                <img v-if="trend?.goods?.image" :src="trend?.goods?.image" alt="goods">
            </div>
            <div class="music" v-else-if="trend.goods_type == 'music'">
                <img v-if="trend?.goods?.image" :src="trend?.goods?.image" alt="goods">
            </div>
        </div>
        <div class="name">{{ trend.goods?.title }}</div>
        <div class="type">
            <div v-if="trend.goods_type == 'video'">视频素材</div>
            <div v-else-if="trend.goods_type == 'picture'">图片素材</div>
            <div v-else-if="trend.goods_type == 'font'">字体素材</div>
            <div v-else-if="trend.goods_type == 'music'">音乐素材</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.item-user {
    width: 100%;
    transition: all .2s;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 3fr;
    align-items: center;
    padding: 10px 0;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    &:hover {
        background-color: #F6F6F6;
    }

    .type {
        text-align: right;
        padding-right: 30px;
        color: rgba(190, 190, 190, 1);
        font-size: 14px;
    }

    .name {
        color: rgba(136, 136, 136, 1);
        font-size: 14px;
    }

    .view {
        width: 110px;
        height: 73px;

        div {
            background-color: #BEBEBE;
            border-radius: 5px;
            margin: 0 auto;
        }

        .font,
        .picture,
        .video {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }

        }

        .music {
            width: 73px;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }
        }

    }

    .time {
        margin-left: 20px;
        color: rgba(56, 148, 255, 1);
        font-size: 14px;
    }
}
</style>
